import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import AntDesign from '@expo/vector-icons/AntDesign';
import { useRouter } from "expo-router";
import {Image} from "expo-image";
import searchIcon from '@/assets/images/space/searchIcon.png'

const BackButton = ( { title, search, searchMethod, backColor = '#333', titleColor = "#333"  } ) => {
    const insets = useSafeAreaInsets();
    const router = useRouter();
    const back = function () {
        router.back();
    };

    return (
        <SafeAreaView style={styles.safeArea}>
            {/*<View style={[styles.container, { paddingTop: insets.top }]}>*/}
            {/*    <TouchableOpacity style={styles.button} onPress={back}>*/}
            {/*        <AntDesign name="left" size={21} color="#333"/>*/}
            {/*    </TouchableOpacity>*/}
            {/*</View>*/}
            <TouchableOpacity style={styles.button} onPress={back}>
                <AntDesign name="left" size={21} color={backColor}/>
            </TouchableOpacity>
            {
                (
                    <View style={styles.title}>
                        <Text style={[styles.titleText, { color: titleColor }]} numberOfLines={1}>{ title }</Text>
                    </View>
                )
            }
            {
                search &&
                (
                    <TouchableOpacity onPress={searchMethod}>
                        <View style={styles.seachIcon}>
                            <Image source={searchIcon} style={{ width: "100%", height: "100%"} } />
                        </View>
                    </TouchableOpacity>
                )
            }
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safeArea: {
        position: "absolute",
        zIndex: 999,
        flex: 1,
        textAlign: "center",
        flexDirection: "row",
        justifyContent: "center",
        width: "100%",
    },
    container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
    },
    button: {
        width: 19,
        height: 19,
        marginLeft: 10,
        // backgroundColor: '#007bff',
        borderRadius: 5,
    },
    buttonText: {
        color: '#fff',
        fontSize: 18,
    },
    title: {
        flex: 1,
        // backgroundColor: "#fff",
    },
    titleText: {
        textAlign: 'center',
        fontSize: 18,
        fontWeight: "bold",

    },
    seachIcon: {
        width: 17,
        height: 17,
        marginRight: 12,
    },
});

export default BackButton;
